<template>
  <!-- 员工信息 -->
  <div class="employee">
    <div class="search">
      <h1>员工信息管理</h1>
      <el-input
        v-model="queryInfo.name"
        placeholder="员工姓名"
        style="width: 150px"
        @input="getEmployee"
        clearable
      ></el-input>
      <el-input
        v-model="queryInfo.id_card"
        placeholder="用户身份证号"
        style="width: 200px"
        @input="getEmployee"
        clearable
      ></el-input>
      <!-- <el-input v-model="queryInfo.employeePhone" placeholder="员工电话" style="width: 180px" @input="getEmployee"
        clearable></el-input> -->

      <!-- <el-select
        v-model="search.department"
        multiple
        placeholder="- 员工部门 -"
        filterable
        style="width:180px"
      >
        <el-option
          v-for="item in tableData"
          :key="item.id"
          :label="item.employe"
          :value="item.employeeDepartment"
        >
        </el-option>
      </el-select> -->
      <el-button type="primary" icon="el-icon-plus" @click="addStaff"
        >添加员工</el-button
      >
      <el-button
        icon="el-icon-delete"
        @click="batchDelete(deleteIds)"
        style="color: white"
        >批量删除</el-button
      >
      <!-- 添加员工弹窗 -->
      <el-dialog
        :title="type == 'create' ? '添加员工' : '编辑员工信息'"
        :visible.sync="addDialogFormVisible"
        center
      >
        <el-form :model="addform" ref="addform" :rules="addrules">
          <el-form-item
            label="账号"
            :label-width="formLabelWidth"
            prop="username"
          >
            <el-input v-model="addform.username" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item
            label="员工姓名"
            :label-width="formLabelWidth"
            prop="nickname"
          >
            <el-input v-model="addform.nickname" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item
            label="员工性别"
            :label-width="formLabelWidth"
            prop="gender"
          >
            <el-radio v-model="addform.gender" :label="0">男</el-radio>
            <el-radio v-model="addform.gender" :label="1">女</el-radio>
          </el-form-item>

          <el-form-item label="出生日期" :label-width="formLabelWidth">
            <el-date-picker
              v-model="addform.birth"
              type="date"
              placeholder="选择日期时间"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item
            label="员工身份证号"
            :label-width="formLabelWidth"
            prop="id_card"
          >
            <el-input v-model="addform.id_card" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item
            label="员工职位"
            :label-width="formLabelWidth"
            prop="post_id"
          >
            <el-select v-model="addform.post_id" placeholder="选择员工职位">
              <el-option
                v-for="(value, key, index) in postList"
                :key="key"
                :label="value"
                :value="Number(key)"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="家庭住址"
            :label-width="formLabelWidth"
            prop="address"
          >
            <el-input v-model="addform.address" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item
            label="手机号码"
            :label-width="formLabelWidth"
            prop="employeePhone"
          >
            <el-input
              v-model="addform.phone_number"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="基本工资"
            :label-width="formLabelWidth"
            prop="salary"
          >
            <el-input v-model="addform.salary" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="开户银行" :label-width="formLabelWidth">
            <el-select
              v-model="addform.bank_id"
              filterable
              placeholder="选择开户银行"
            >
              <el-option
                v-for="(value, key, index) in bankList"
                :key="key"
                :label="value"
                :value="Number(key)"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="银行卡号" :label-width="formLabelWidth">
            <el-input v-model="addform.bank_card" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="状态" :label-width="formLabelWidth">
            <el-switch
              v-model="addform.status"
              active-color="#13ce66"
              inactive-color="#ff4949"
              
            >
            </el-switch>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="addDialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addEmployee('addform')"
            >确 定</el-button
          >
        </div>
      </el-dialog>
    </div>

    <!-- 展示 -->
    <div class="table">
      <el-table
        :data="tableData"
        style="width: 100%"
        :default-sort="{ prop: 'date', order: 'descending' }"
        @selection-change="handleSelectionChange"
        height="450px"
      >
        <el-table-column type="selection" width="30"> </el-table-column>
        <el-table-column
          type="index"
          :index="1 + (queryInfo.page - 1) * queryInfo.size"
          label="编号"
          width="50"
        >
        </el-table-column>
        <el-table-column prop="nickname" label="姓名" width="70">
        </el-table-column>
        <el-table-column prop="gender" label="性别" width="50">
          <template slot-scope="scope">
            <span>{{ scope.row.gender == 0 ? "男" : "女" }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="birth" label="年龄" width="80" sortable>
          <template slot-scope="scope">
            <span>{{ countAge(scope.row.birth) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="id_card" label="身份证号">
        </el-table-column>
        <!-- <el-table-column prop="employeeDepartment" label="员工部门" width="120">
        </el-table-column> -->
        <el-table-column prop="post_name" label="员工职务" width="90"> </el-table-column>
        <!-- <el-table-column prop="birth" label="工龄" width="80" sortable>
        </el-table-column> -->
        <el-table-column prop="address" label="家庭住址" width="180"> 
          <template slot-scope="scope">
            {{ scope.row.address?scope.row.address:'暂无' }}
          </template>
        </el-table-column>
        <el-table-column prop="phone_number" label="电话" width="120">
          <template slot-scope="scope">
            {{ scope.row.phone_number?scope.row.phone_number:'暂无' }}
          </template>
           </el-table-column>
        <el-table-column prop="bank_name" label="开户行" width="130"> 
          <template slot-scope="scope">
            {{ scope.row.bank_name?scope.row.bank_name:'暂无' }}
          </template>
        </el-table-column>
        <el-table-column prop="bank_card" label="银行卡号" width="180"> 
          <template slot-scope="scope">
            {{ scope.row.bank_card?scope.row.bank_card:'暂无' }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="80">
          <template slot-scope="scope">
            <el-popconfirm
              title="确定删除吗？"
              @confirm="deleteEmployee(scope.row.id)"
              ><i
                slot="reference"
                class="icon-shanchu iconfont"
                style="color: red; margin-right: 5px"
              ></i>
            </el-popconfirm>

            <i
              slot="reference"
              class="icon-xiugai2 iconfont"
              style="color: #4064e1"
              @click="showUpdateDialog(scope.row)"
            ></i>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页组件 -->
      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="queryInfo.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { provinceAndCityData } from "element-china-area-data";
import { addEmployee } from "../api/index";
import {
  getStaffList,
  getStaffDetail,
  editStaff,
  delStaff,
  batchDelStaff,
  createStaff,
  getPostType,
} from "@/api/user";
import { getBank } from "@/api/common";
import dayjs from "dayjs";

export default {
  data() {
    return {
      options: provinceAndCityData,
      tableData: [],
      addDialogFormVisible: false,
      addform: {
        // username: "",
        // nickname:'',
        // gender: "",
        // birth: "",
        // id_card: "",
        // address: "",
        // phone_number: "",
        // bank_card: "",
        // salary: 0,
        status: true,
        // post_id:''
      },
      addrules: {
        username: [
          { required: true, message: "请输入账号", trigger: "blur" },
          { min: 5, message: "账号大于 5 个字符", trigger: "blur" },
        ],
        nickname: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        post_id: [{ required: true, message: "请选择职位", trigger: "blur" }],
        phone_number: [
          { required: true, message: "请输入员工电话", trigger: "blur" },
        ],
        salary: [
          { required: true, message: "请输入基本工资", trigger: "blur" },
        ],
      },
      post: [],
      //表单宽度
      formLabelWidth: "120px",
      updateDialogVisible: false,
      //修改表单验证
      updateFormRulues: {},
      bank: [],
      deleteIds: [],
      //查询信息实体
      queryInfo: {
        page: 1,
        size: 10,
        name: "",
        id_card: "",
      },
      total: 0, //总记录数
      type: "create",
      postList: {},
      bankList: {},
    };
  },
  computed: {},
  methods: {
    handleChange(value) {
      console.log(value);
    },
    //获取所有员工信息
    async getEmployee() {
      getStaffList(this.queryInfo).then((res) => {
        this.total = res.total;
        this.tableData = res.data;
      });
    },
    //最大数
    handleSizeChange(newSize) {
      this.queryInfo.size = newSize;
      this.getEmployee();
    },
    //pageNum的触发动作
    handleCurrentChange(newPage) {
      this.queryInfo.page = newPage;
      this.getEmployee();
    },

    addEmployee(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let params = this.addform;
          if (this.addform.birth) {
            params = {
              ...this.addform,
              birth: dayjs(this.addform.birth).format("YYYY-MM-DD"),
            };
          }

          if (this.type == "create") {
            createStaff(params).then(() => {
              this.addDialogFormVisible = false;
              this.$message.success("操作成功！");
              this.getEmployee();
              this.$refs.addformRef.resetFields();
            });
          } else {
            editStaff(this.addform.id,this.addform).then(() => {
               this.addDialogFormVisible = false;
              this.$message.success("操作成功！");
              this.getEmployee();
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    async searchUser() {},
    async deleteEmployee(id) {
      delStaff(id).then(() => {
        this.$message.success("操作成功！");
        this.getEmployee();
      });
    },

    /** 多选框选中数据 */
    handleSelectionChange(selection) {
      this.deleteIds = selection.map((item) => item.id);
      console.log(this.deleteIds);
    },

    //批量删除
    batchDelete(rows) {
      console.log(rows);
      if (rows.length !== 0) {
        this.$confirm("是否确认删除这" + rows.length + "条数据?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          // this.$http.post("batchDeleteEmployee", rows);
          batchDelStaff(rows).then(() => {
            this.$message.success("删除成功");
            this.getEmployee();
          });
        });
      } else {
        this.$message.error("未选择数据！");
      }
    },

    showUpdateDialog(currentData) {
      this.addDialogFormVisible = true;
      getStaffDetail(currentData.id).then((res) => {
        this.addform = { ...res.data.data };

        this.type = "update";
      });
    },
    addStaff() {
      this.addDialogFormVisible = true;
      this.addform = {};
      this.type = "create";
    },
    countAge(value) {
      return dayjs().format("YYYY") - dayjs(value).format("YYYY");
    },
  },
  created() {
    this.getEmployee();
    getPostType().then((res) => {
      this.postList = res;
    });
    getBank().then((res) => {
      this.bankList = res;
      this.bankSelect = res;
    });
  },
  mounted() {},
};
</script>

<style lang="less" scoped>
.employee {
  margin: 0 10px;
}

h1 {
  font-size: 24px;
  font-weight: 400;
  padding-bottom: 10px;
  color: #565758;
}

.el-select {
  margin-right: 20px;
}

.search {
  .el-input {
    margin-right: 20px;
  }

  .el-button {
    background-color: #4064e1;
    border: 0 !important;
    color: #fff;
  }
}

.table {
  margin-top: 40px;
  overflow: auto;
}

.pagination {
  width: 400px;
  margin: 10px auto;
}
</style>
